<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: aquamarine;
		}
		.box1{
			font-size: 50px;
		}
		.hongse{
			color: red;
		}
        .boxx {
            width: 520px;
            height: 400px;
            margin: 10px auto;
            background: skyblue;
            overflow: hidden;
            border-radius: 5px;
        }
        .boxx>div.active {
            display: block;
        }
        .bg{
            color: red;
        }
        

	</style>
	<body>
		<div id="app">
<!-- 		
		1.    <h1 :class="c1"  >这是一段文字</h1>
		   编译后
		   <h1 class="box1"  >这是一段文字</h1> -->
		   
		   
	<!-- 	2.    <h1 :class="[red,c1]"  >这是一段文字</h1>
		   多个数据  编译后
		   <h1 class="hongse box1"  >这是一段文字</h1> -->
		   
		   
		   
		  <!-- <button @click="activeIndex = 1">改变</button>
      <h1 :class="activeIndex===0?red:c1 "  >这是一段文字</h1> -->
<!-- 	  判断 activeIndex===0   是否为真
	  为真  就渲染 ？后的数据
	  否则 渲染 ： 后的数据 -->
	  
	  <!-- 数据可以是变量 也可以是字符串数字等基本类型 -->
<!-- 	 <h1 :class='activeIndex===0?red:"aaa" '  >这是一段文字</h1>
	  
	  -->
	  
	  
	<!-- <button @click="activeIndex=0" :class="{'hongse':activeIndex===0    }">小火龙</button>  
	<button  @click="activeIndex=1" :class="{'hongse':activeIndex===1    }">杰尼龟</button>  
	<button @click="activeIndex=2" :class="{'hongse':activeIndex===2    }">皮卡丘</button>  
	<button @click="activeIndex=3" :class="{'hongse':activeIndex===3    }">妙蛙种子</button>  
	  
    <div class="boxx">
        <div :class="{'hongse':activeIndex===0    }" v-if="display=true">内容一</div>
        <div :class="{'hongse':activeIndex===1    }" v-if="display">内容二</div>
        <div :class="{'hongse':activeIndex===2    }" v-if="display">内容三</div>
        <div :class="{'hongse':activeIndex===3    }" v-if="display">内容四</div>
    </div> -->
        <button v-for="(item,index) in arr" @click="flag = index">{{item}}</button>
        <div v-for="(item,index) in arr2" v-show="index === flag">{{item}}</div>
		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
		const {createApp,ref} = Vue;
		createApp({
			setup() {
				
				let arr = ref(["选项1","选项2","选项3"])
                let arr2 = ref(["我是选项1","我是选项2","我是选项3"])
                let flag = ref(2)
				return {
					arr,
                    arr2,
                    flag
				}		
			}
		}).mount('#app')
		
		
	</script>
</html>